﻿<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { Modal as AModal } from 'ant-design-vue'
import { BasicTableColumn } from '@/types'
import {
  Approval,
  ConditionSelectorParams
} from '@/types/modules/approval'
import { ApprovalType, approvalTypeOptions } from '@/types/modules/approval-type'
import { AssetsType, assetsTypeOptions } from '@/types/modules/assets-type'
import { ApprovalStatus, approvalStatusOptions } from '@/types/modules/approval-status'
import { BasicModal as BModal } from '@/components/Modal'
import CommitterDetail from '@/views/user/detail.vue'
import { getEnumDisplayName } from '@/utils/enum'
import { formatToDateTime } from '@/utils/dateUtil'
import { useI18n } from '@/hooks/web/useI18n'
import { useHttp } from '@/hooks/web/useHttp'
import { useModal } from '@/hooks/system/useModal'
import { useDrawer } from '@/hooks/system/useDrawer'
import { useTableList } from '@/hooks/system/useTableList'
import * as api from '@/api/modules/approval'
import search from './components/search.vue'
import list from './components/list.vue'
import detail from './detail.vue'


import { useLoginAccountStoreWithOut } from '@/store/modules/login'
import { useSettingsStoreWithOut } from '@/store/modules/layout'

const { t } = useI18n()

const searchParams: ConditionSelectorParams = reactive({})

let basicData: BasicTableColumn<Approval>[] = [
  {
    title: '审批类型',
    dataIndex: 'type',
    customRender: data =>
      getEnumDisplayName(data.record.type, approvalTypeOptions)
  },
  {
    title: '资产类型',
    dataIndex: 'assetsType',
    customRender: data =>
      getEnumDisplayName(data.record.assetsType, assetsTypeOptions)
  },
  {
    title: '备注',
    dataIndex: 'remark'
  },
  {
    title: '提交者',
    dataIndex: 'committer',
    isCheck: true,
    name: 'name',
    ellipsis: true
  },
  {
    title: '审批状态',
    dataIndex: 'status',
    customRender: data =>
      getEnumDisplayName(data.record.status, approvalStatusOptions)
  },
]

const pass = async (row: Approval) => {  
  await api.approvalPass(row.id)

  getDataList()
}

const reject = async (row: Approval) => {  
  await api.approvalReject(row.id, '拒绝')

  getDataList()
}

const localStore = useLoginAccountStoreWithOut();
const settingsStore = useSettingsStoreWithOut();

const canApprove = (row: Approval) => {
  if (settingsStore.getSystemSettings.systemAdminCanApprove && row.status == ApprovalStatus.Pending) {
    return true;
  }
  
  let flag = false;
  row.approvalDetails.forEach(e => {
    if (e.status == ApprovalStatus.Pending && e.approver?.name == localStore.getUsername) {
      flag = true;
    }
  })
  
  return flag;
}

const { columns, pageParams, tableData, total, getData } =
  useTableList<Approval>(basicData)

onMounted(() => {
  getDataList()
})

const getDataList = getData<ConditionSelectorParams>(api.getConditionSelector, searchParams)

const onSearch = () => {
  pageParams.value.pageNum = 1
  getDataList()
}

const {
  bindValue: detailBindValue,
  register: detailRegister,
  currentItem: detailCurrentItem,
  onShow: onShowDetail,
  onClose: onCloseDetail
} = useModal<Approval>()

const {
  visible: relateVisible,
  currentItem: relateCurrentItem,
  onShow: onShowRelate
} = useDrawer()

const relateComps = {
  committer: CommitterDetail,
}

const relateAttrName = ref<string>('')
const relateTitle = ref<string>('')
const onCheckRelate = (attrName: string, title: string, relate: any) => {
  relateAttrName.value = attrName
  relateTitle.value = title
  onShowRelate(relate)
}
</script>

<template>
  <div class="page-wrapper">
    <a-card class="search-card">
      <search :formState="searchParams" @search="onSearch" />
    </a-card>
    <a-card class="table-card">
      <list v-bind="{ pageParams, total, columns, tableData }" title="审批" @refresh="getDataList" @check="onCheckRelate">
    <template #operate="row">
      <a type="link" @click="onShowDetail(row)">{{ t('system.detail') }}</a>
      <div v-if="canApprove(row)" style="display: inline;">
        <div v-perms="'Approval:PassAsync(Int32)'" style="display: inline;">
          <a-divider type="vertical" />
          <a type="link" @click="pass(row)">{{ t('system.pass') }}</a>
        </div>
        <div v-perms="'Approval:RejectAsync(Int32,String)'" style="display: inline;">
          <a-divider type="vertical" />
          <a type="link" @click="reject(row)">{{ t('system.reject') }}</a>
        </div>
      </div>
    </template>
      </list>
    </a-card>

    <b-modal v-bind="detailBindValue" :footer="null" :title="t('system.modal.detail')" @register="detailRegister"
      @cancel="onCloseDetail">
      <detail :item-data="detailCurrentItem" />
    </b-modal>
    
    <a-drawer v-model:visible="relateVisible" :title="relateTitle" width="40vw" placement="right">
      <component :is="relateComps[relateAttrName]" :item-data="relateCurrentItem" />
    </a-drawer>
  </div>
</template>

<style lang="less" scoped>
.page-wrapper {
  padding: 20px;

  .table-card {
    margin-top: 20px;
  }
}

.drawer-footer {
  text-align: right;

  button {
    margin-left: 8px;
  }
}
</style>
